<template>
	<el-dialog v-model="dialogVisible" :title="isAdd ? '新增用户' : '修改用户'" @close="onClose" :close-on-click-modal="false">
		<!-- name, type, description, sort, case_list='', learn_more=''  -->
		<el-form :model="data.form" :rules="rules" ref="ruleFormRef">
			<el-form-item label="名字" :label-width="formLabelWidth" prop="name"><el-input v-model="data.form.name" placeholder="名字"></el-input></el-form-item>
			<el-form-item label="描述" :label-width="formLabelWidth" prop="description">
				<el-input type="textarea" v-model="data.form.description" placeholder="描述"></el-input>
			</el-form-item>
			<el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
				<el-input type="number" v-model="data.form.sort" placeholder="排序" style="width: 200px;" min="0"></el-input>
			</el-form-item>
			<el-form-item label="类型" prop="type" :label-width="formLabelWidth">
				<el-select v-model="data.form.type" placeholder="类型">
					<el-option v-for="item in learnType" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="学习更多" prop="learn_more" :label-width="formLabelWidth">
				<el-select v-model="data.form.learn_more" multiple filterable placeholder="添加学习链接" :loading="loading">
					<el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="随堂案例" prop="case_list" :label-width="formLabelWidth">
				<el-select v-model="data.form.case_list" multiple filterable placeholder="添加随堂案例" :loading="loading">
					<el-option v-for="item in options1" :key="item.id" :label="item.title" :value="item.id" />
				</el-select>
			</el-form-item>
		</el-form>

		<!-- role_name,user_code,user_name,password,phone,email,qq,note,role_id -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import md5 from 'js-md5';
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useMainStore } from '@/store/index.js';
import { storeToRefs } from 'pinia';
//请求
const { proxy } = getCurrentInstance();
import { getCurrentInstance,ref,watchEffect} from 'vue';

//dialogSend hook
import hook from '@/hooks/useDialogSend';
const {data,ruleFormRef,formLabelWidth,dialogVisible} = hook;
const isAdd = ref(true);
const emits = defineEmits(['closeDialog'])
defineExpose({ open });

function open(row){
	if(row){
		data.form = Object.assign({},row)
		if(data.form.case_list){
			  data.form.case_list = data.form.case_list.map(item=>item.id)
		}
		if(data.form.learn_more){
			  data.form.learn_more = data.form.learn_more.map(item=>item.id)
		}
		isAdd.value = false
	}
	dialogVisible.value = true;
	getOptions(5,options)
	getOptions(3,options1)
}

//引入piana
const mainStore = useMainStore();
const { learnType } = storeToRefs(mainStore);

interface ListItem {
  value: string
  label: string
}
const loading = ref(false)
const options = ref<ListItem[]>([])
const options1 = ref<ListItem[]>([])

const getOptions = (link_type,options)=>{
	console.log(5555,data.form.type);
	proxy
		.$get('/link', {
			link_type,
			limit:99999999,
			type:data.form.type
		})
		.then(res => {
			console.log(res);
			if (res.code === 200) {
				loading.value = false
				options.value = res.data.list;
			}
		});
}

// title, type, keyword, result, importance, keywordRadio
const rules = {
	name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
	type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
	description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
};

const submitForm = async (formEl: FormInstance | undefined) => {
	console.log(formEl);
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
		let bool = !!data.form.id
		let url = bool?'/learn/update':'/learn/add'
      proxy
      	.$post(url,{...data.form})
      	.then(res => {
			console.log(res);
      		if(res.code===200){
				ElMessage({
				  message: bool?'修改成功':'添加成功',
				  type: 'success',
				})
				onClose(true)
			}
      	});
    } else {
      console.log('error submit!', fields)
    }
  })
}

function onClose(bool){
	emits('closeDialog',bool)
	dialogVisible.value = false
	data.form = {}
}
</script>

<style scoped lang="less"></style>
